<template>
	<view class='team_details'>
		<view class="main_top">
			<view class="top_info">
				<image class="header" :src="avatar || url" mode="aspectFill"></image>
				<view class="info_text">
					<view class="name">{{username}} {{mobile}}</view>
					<view class="text">
						<view class="t_txt" v-if="level==1">店员</view>
						<view class="t_txt" v-if="level==2">管理</view>
						<view class="t_txt" v-if="level==3">副店</view>
						<view class="t_txt" v-if="level==4">店长</view>
						<view class="t_rz" :class="is_certification==1?'t_rz_no':''">
							<image v-if="is_certification==1" src="@/static/images/rz_icon_no.png" mode=""></image>
							<image v-else src="@/static/images/rz_icon.png" mode=""></image>
							<text>{{is_certification==1?'待认证':'已认证'}}</text>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="main_num">
				<view class="num_text">
					<view class="text">
						<text class="num">{{buy_pay_money}}</text>
						<text class="tip">买单总额</text>
					</view>
					<view class="text">
						<text class="num">{{sell_pay_money}}</text>
						<text class="tip">卖单总额</text>
					</view>
					<view class="text">
						<text class="num">{{dq_ze}}</text>
						<text class="tip">当前库存</text>
					</view>
					<view class="text">
						<text class="num">{{accumulative}}</text>
						<text class="tip">累计收入</text>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="main_nav">
			<view class="info_two">
				<view class="nav_list" @click="realBtn">
					<view class="left">
						<image src="@/static/images/team/team_icon1.png" mode=""></image>
						<text>会员实名认证</text>
					</view>
					<view class="right">
						<view class="txt" v-if="is_certification==1">未认证</view>
						<view class="txt color" v-else>已认证</view>
						<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
					</view>
				</view>
				<view class="nav_list" @click="bankBtn">
					<view class="left">
						<image src="@/static/images/team/team_icon2.png" mode=""></image>
						<text>绑定银行卡</text>
					</view>
					<view class="right">
						<view class="txt color" v-if="card_number">已绑定</view>
						<view class="txt" v-else>未绑定</view>
						<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="main_nav">
			<view class="info_two">
				<view class="nav_list" @click="navBtn(1)">
					<view class="left">
						<image src="@/static/images/team/team_icon3.png" mode=""></image>
						<text>买单信息</text>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
					</view>
				</view>
				<view class="nav_list" @click="navBtn(2)">
					<view class="left">
						<image src="@/static/images/team/team_icon4.png" mode=""></image>
						<text>卖单信息</text>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
					</view>
				</view>
				<view class="nav_list" @click="navBtn(3)">
					<view class="left">
						<image src="@/static/images/team/team_icon5.png" mode=""></image>
						<text>货物库存</text>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="main_nav">
			<view class="info_two">
				<view class="nav_list" @click="navBtn(4)">
					<view class="left">
						<image src="@/static/images/team/team_icon6.png" mode=""></image>
						<text>佣金明细</text>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
					</view>
				</view>
				<view class="nav_list" @click="navBtn(5)">
					<view class="left">
						<image src="@/static/images/team/team_icon7.png" mode=""></image>
						<text>积分明细</text>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
					</view>
				</view>
				<view class="nav_list" @click="navBtn(6)">
					<view class="left">
						<image src="@/static/images/team/team_icon8.png" mode=""></image>
						<text>提现明细</text>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:require('@/static/images/headerImage.png'),
				id:'',
				avatar:'',
				username:'',
				mobile:'',
				level:'',
				is_certification:'',
				buy_pay_money:'',
				sell_pay_money:'',
				dq_ze:'',
				accumulative:'',
				card_number:'',
			};
		},
		onLoad(opt) {
			var that = this
			that.id=opt.id
			that.$tips.showLoading('加载中')
			var params = {
				user_id:opt.id
			}
			that.$httpApi.teamUserInfo(params).then((res)=>{
				that.$tips.hideLoading()
				if(res.code==1){
					that.avatar=res.data.avatar
					that.username=res.data.username
					that.mobile=res.data.mobile
					that.level=res.data.level
					that.is_certification=res.data.is_certification
					that.buy_pay_money=res.data.buy_pay_money
					that.sell_pay_money=res.data.sell_pay_money
					that.dq_ze=res.data.dq_ze
					that.accumulative=res.data.accumulative
					that.card_number=res.data.card_number
				}
			})
		},
		methods:{
			realBtn(){
				uni.navigateTo({
					url:'/pages/person/person_real?id='+this.id
				})
			},
			bankBtn(){
				uni.navigateTo({
					url:'/pages/person/person_bankcard?id='+this.id
				})
			},
			navBtn(type){
				if(type==1){
					uni.navigateTo({
						url:'/pages/shop/buy_order?id='+this.id
					})
				}
				if(type==2){
					uni.navigateTo({
						url:'/pages/shop/sales_order?id='+this.id
					})
				}
				if(type==3){
					uni.navigateTo({
						url:'/pages/shop/cargo_management?id='+this.id
					})
				}
				if(type==4){
					uni.navigateTo({
						url:'/pages/shop/money_records?id='+this.id
					})
				}
				if(type==5){
					uni.navigateTo({
						url:'/pages/shop/inv_records?id='+this.id
					})
				}
				if(type==6){
					uni.navigateTo({
						url:'/pages/shop/withdrawal_details?id='+this.id
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.team_details{
		width: 100%;
		.main_top{
			width: 100%;
			padding-top: 20rpx;
			background-image: linear-gradient(#3AC78C, #f7f8fa);
			.top_info{
				width: 100%;
				padding: 0 40rpx;
				display: flex;
				.header{
					display: block;
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
				}
				.info_text{
					padding-left: 20rpx;
					height: 112rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					.name{
						width: 100%;
						font-size: 40rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}
					.text{
						width: 100%;
						display: flex;
						align-items: center;
						.t_txt{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}
						.t_rz{
							margin-left: 10rpx;
							padding: 0 16rpx;
							height: 42rpx;
							border-radius: 21rpx;
							background: linear-gradient(90deg, #6B6152 0%, #4E4942 100%);
							display: flex;
							align-items: center;
							image{
								display: block;
								width: 32rpx;
								height: 32rpx;
							}
							text{
								padding-left: 5rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #FFFFFF;
							}
						}
						.t_rz_no{
							background: linear-gradient(90deg, #D8D8D8 0%, #B4B4B4 100%);
						}
					}
				}
			}
			.main_num{
				width: 100%;
				padding: 40rpx 24rpx 0;
				.num_text{
					width: 100%;
					padding: 24rpx;
					background: #fff;
					border-radius: 10rpx;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					.text{
						width: 318rpx;
						height: 148rpx;
						background: #F7F8FA;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						.num{
							font-size: 32rpx;
							font-family: OPPOSans-Bold, OPPOSans;
							font-weight: bold;
							color: #222222;
						}
						.tip{
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
		}
		//
		.main_nav{
			width: 100%;
			padding: 0 24rpx;
		}
		.info_two{
			width: 100%;
			margin-top: 24rpx;
			padding: 15rpx 32rpx;
			border-radius: 10rpx;
			background: #fff;
			.nav_list{
				width: 100%;
				height: 100rpx;
				padding: 40rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					image{
						display: block;
						width: 40rpx;
						height: 40rpx;
					}
					text{
						padding-left: 24rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
				}
				.right{
					display: flex;
					align-items: center;
					.txt{
						padding-right: 24rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #888888;
					}
					.color{
						color: #26C281;
					}
				}
			}
		}
	}
</style>
